{% extends "base.html"%}
{% block content%}
      <tr>
	  <td>&nbsp;</td>
	  <td colspan="4"></td>
	  <td>

<table width=100% border=1px cellpadding="0" cellspacing="0" >
    <tr>
	<td width="60%" valign="top" >
	<div align="center">Новое Кафе</div>
	<form name="add" action="/food/addcafe/" method="post" enctype="multipart/form-data">
	Название: <input type="text" name="cafe_name" size="19">
<br>
	Улица: <input type="text" name="cafe_stret" size="5">
	Дом: <input type="text" name="cafe_house" size="5"> 
	Средний чек: <input type="text" name="cafe_price" size="5"><br>
	Фото: <input type="file" name="cafe_logo"  size="20">
	<input type="hidden" name="cafe_geo" size="20" >
<br>
	<input name="submit" type="submit" value="Сохранить" >
	</form>
        <div align="center">{{ alert }}</div>
	</td>
	<td width="40%" align="right" >
	<script type="text/javascript">
        window.onload = function () {
                var map = new YMaps.Map(document.getElementById("YMapsID"));
                map.setCenter(new YMaps.GeoPoint(135.11793, 48.47854), 12);
                var zoom = new YMaps.Zoom({customTips: [{ index: 6, value: "Весь край" },{ index: 12, value: "Город" },{ index: 16, value: "Близко" }]});
                map.addControl(zoom);
                var search = new YMaps.SearchControl({ width:15 });
                        var placemark2 = new YMaps.Placemark(new YMaps.GeoPoint(37.6, 55.7));
                        var myEventListener = YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
                                map.removeOverlay(placemark2);
                                var dot = mEvent.getGeoPoint();
                                var placemark = new YMaps.Placemark( dot ,{style: "default#cafeIcon"});
                                map.addOverlay(placemark);
                                placemark2 = placemark;
                                document.add.cafe_geo.value = dot;
                                });
                                }
	</script>
	<div id="YMapsID" style="width:400px;height:400px"></div>
	</td>
    </tr>
</table>


	  </td><td>&nbsp;</td>
      </tr>
      <tr>
	  <td height=13px colspan="8"></td>
      </tr>
      <tr>
	<td ></td>
        <td colspan="5">&nbsp;
	</td>
	<td>&nbsp;</td>
     </tr>
{% endblock %}

